<template>
  <div class="admin-type">
    <div class="my-admin-header">
      <div class="left">
        <h1 class="title">
          <i class="el-icon-collection-tag"></i>
          分类管理
        </h1>
      </div>
    </div>
    <div class="my-admin-content">
      <div class="top">
        <el-button type="primary" size="small" @click="dialogVisible=true">添加一级分类</el-button>
      </div>
      <div class="main" v-loading="loading">
        <!-- 一级分类 -->
        <div class="type-1-item" v-for="(item,index) in type1Data" :key="item.id">
          <p>
            {{item.typeName}}
            <span class="edit" @click="openEdit(item.id)">编辑</span>
            <span class="del" @click="del(item.id,index)">删除</span>
          </p>
          <p>{{item.remark}}</p>
          <p>权重:{{item.rank}}</p>
          <!-- handelClick点击回调事件，param传给handleClick的参数 -->
          <div class="type-2">
            <type2 :id="item.id"></type2>
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination
          @current-change="currentChange"
          hide-on-single-page
          background
          layout="prev, pager, next"
          :total="totalRow"
          :page-size="5"
        ></el-pagination>
      </div>
    </div>

    <!-- 添加页面弹出框 -->
    <el-dialog title="添加一级分类" :visible.sync="dialogVisible">
      <admin-type-add :closeDialog="closeDialog" :success="addSuccess"></admin-type-add>
    </el-dialog>
    <!-- 添加编辑页面弹出 -->
    <el-dialog title="修改一级分类" :visible.sync="editDialogVisible">
      <admin-type-edit :closeDialog="closeDialog" :id="type1Id" :updateSuccess="updateSuccess"></admin-type-edit>
    </el-dialog>
  </div>
</template>

<script>
import myCollapse from "../../components/my-collapse.vue";
import type2 from "./type/admin-type-children.vue";
import adminTypeAdd from "./type/admin-type-add.vue";
import adminTypeEdit from "./type/admin-type-edit.vue";

export default {
  name: "adminType",
  data: function() {
    return {
      dialogVisible: false,
      editDialogVisible: false,
      totalRow: 0,
      type1Data: [],
      type1Id: null,
      loading: false,
      pageNumber:1
    };
  },
  mounted: function() {
    this.getType1Data();
  },
  methods: {
    handleClick(a) {
      console.log(a);
    },
    closeDialog() {
      this.dialogVisible = false;
      this.editDialogVisible = false;
    },
    getType1Data() {
      this.loading = true;
      this.axios
        .post("videoType/type1List", {
          pageNumber: this.pageNumber,
          pageSize:5
        })
        .then(res => {
          this.totalRow = res.data.page.totalRow;
          this.type1Data = res.data.page.list;
          this.loading = false;
        });
    },
    openEdit(id) {
      this.editDialogVisible = true;
      this.type1Id = id;
    },
    //删除
    del(id,index) {
      this.$confirm("此操作将永久删除该分类和其所有子分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios.post("videoType/delType1", { id: id }).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.type1Data.splice(index,1)
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //添加成功回调函数
    addSuccess(data){
      this.getType1Data()
    },
    updateSuccess(){
       this.getType1Data()
    },
    //分页变化
    currentChange(val) {
      this.pageNumber=val
      this.getType1Data()
    }
  },
  components: {
    myCollapse,
    type2,
    adminTypeAdd,
    adminTypeEdit
  }
};
</script>

<style lang="scss" scoped>
.admin-type {
  .main {
    .type-1-item {
      border-bottom: 1px solid #e4e7ed;
      margin-bottom: 30px;
    }
  }
  p {
    &:first-child {
      color: #303133;
      font-size: 14px;
      font-weight: bold;
    }
    //操作按钮基本样式
    span {
      font-size: 12px;
      color: #c0c4cc;
      font-weight: 100;
      &:hover {
        cursor: pointer;
      }
      &:first-child {
        margin: 0 0 0 10px;
      }
    }
  }
}
//操作按钮hover样式
.edit:hover {
  color: #409eff;
}
.del:hover {
  color: #f56c6c;
}
</style>